<template>
  <el-main>
    <!-- 添加学员信息 -->
    <ElForm
      :model="student"
      ref="myForm"
      :inline="true"
      :rules="rules"
      label-width="80px"
    >
      <ElFormItem label="学生姓名" prop="uName">
        <ElInput v-model="student.sName" placeholder="请输入学员姓名"></ElInput>
      </ElFormItem>
      <ElFormItem label="性别" prop="gender">
        <el-radio v-model="student.gender" label="1">男</el-radio>
        <el-radio v-model="student.gender" label="0">女</el-radio>
      </ElFormItem>
      <ElFormItem label="邮箱地址" prop="email">
        <ElInput
          v-model="student.email"
          placeholder="请输入正确的邮箱地址"
        ></ElInput>
      </ElFormItem>
      <ElFormItem label="兴趣爱好" prop="hobby">
        <el-checkbox-group v-model="student.hobby">
          <el-checkbox label="游泳" name="hobby"></el-checkbox>
          <el-checkbox label="打球" name="hobby"></el-checkbox>
          <el-checkbox label="看书" name="hobby"></el-checkbox>
          <el-checkbox label="听音乐" name="hobby"></el-checkbox>
        </el-checkbox-group>
      </ElFormItem>
      <ElFormItem>
        <el-button type="primary" @click="onSubmit('myForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('myForm')" type="info" plain
          >重置</el-button
        >
      </ElFormItem>
    </ElForm>

    <!-- 学生列表 -->
    <h2>学生列表</h2>
    <el-table :data="users" width="100%" border>
      <el-table-column
        fixed
        prop="id"
        label="学号"
        width="140"
      ></el-table-column>
      <el-table-column prop="sName" label="姓名" width="120"></el-table-column>
      <el-table-column
        prop="email"
        label="邮箱地址"
        width="200"
      ></el-table-column>
      <el-table-column prop="gender" label="性别" width="120"></el-table-column>
      <el-table-column prop="hobby" label="兴趣" width="200">
        <template slot-scope="scope">
          <div>
            <span v-for="(item, i) in scope.row.hobby" :key="i"
              >{{ item }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small"
            >查看</el-button
          >
          <el-button
            type="success"
            size="small"
            @click="dialogVisible(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog title="提示" :visible.sync="isDialogVisible" width="30%">
      <ElForm
        :model="student"
        ref="myForm"
        :inline="true"
        :rules="rules"
        label-width="80px"
      >
        <ElFormItem label="学生姓名" prop="uName">
          <ElInput
            v-model="student.sName"
            placeholder="请输入学员姓名"
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="性别" prop="gender">
          <el-radio v-model="student.gender" label="1">男</el-radio>
          <el-radio v-model="student.gender" label="0">女</el-radio>
        </ElFormItem>
        <ElFormItem label="邮箱地址" prop="email">
          <ElInput
            v-model="student.email"
            placeholder="请输入正确的邮箱地址"
          ></ElInput>
        </ElFormItem>
        <ElFormItem label="兴趣爱好" prop="hobby">
          <el-checkbox-group v-model="student.hobby">
            <el-checkbox label="游泳" name="hobby"></el-checkbox>
            <el-checkbox label="打球" name="hobby"></el-checkbox>
            <el-checkbox label="看书" name="hobby"></el-checkbox>
            <el-checkbox label="听音乐" name="hobby"></el-checkbox>
          </el-checkbox-group>
        </ElFormItem>
      </ElForm>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doUpdateStudent('myForm', student.id)"
          >更改</el-button
        >
        <el-button @click="isDialogVisible = false" type="info" plain
          >取消</el-button
        >
      </span>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      isDialogVisible: false,
      users: [],
      student: {
        id: "",
        sName: "",
        uPwd: "",
        gender: "",
        hobby: [],
        email: "",
      },
      rules: {
        sName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      this.$axios({
        method: "get",
        url: "http://localhost:5000/api/students",
      }).then((res) => {
        this.users = res.data;
        console.log(this.users);
      });
    },
    onSubmit(form) {
      this.$refs[form].validate((valid) => {
        let data = this.student;
        if (valid) {
          this.$axios({
            method: "post",
            url: "http://localhost:5000/api/students",
            data,
          }).then((res) => {
            if (res.data.errno == 0) {
              this.getUsers();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 充值
    resetForm(form) {
      console.log(this.$refs[form]);
      this.$refs[form].resetFields();
    },
    // 弹出更改对话框
    dialogVisible(row) {
      this.isDialogVisible = true;
      this.student = row;
    },
    // 更新数据
    doUpdateStudent(form, id) {
      this.$refs[form].validate((valid) => {
        let data = this.student;
        if (valid) {
          this.$axios({
            method: "put",
            url: `http://localhost:5000/api/students/${id}`,
            data,
          }).then((res) => {
            if (res.data.errno == 0) {
              this.isDialogVisible = false;
              this.getUsers();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
table {
  height: 600px;
}
</style>
